<template>
  <div class="repair-manage">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>维修申请管理</span>
          <div class="header-actions">
            <el-button type="success" @click="exportData" v-if="userRole === 'ADMIN'">
              <el-icon><Download /></el-icon>
              导出数据
            </el-button>
            <el-button type="primary" @click="refreshData">
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
          </div>
        </div>
      </template>

      <!-- 统计信息 -->
      <div class="statistics-section">
        <el-row :gutter="20">
          <el-col :span="4" v-for="stat in statistics" :key="stat.label">
            <div class="stat-card" :class="stat.type">
              <div class="stat-icon">
                <el-icon><component :is="stat.icon" /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ stat.value }}</div>
                <div class="stat-label">{{ stat.label }}</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 筛选条件 -->
      <div class="filter-section">
        <el-row :gutter="20">
          <el-col :span="5">
            <el-select v-model="filterStatus" placeholder="选择状态" style="width: 100%" @change="handleFilter">
              <el-option label="全部状态" value="" />
              <el-option label="待审批" value="待审批" />
              <el-option label="已分配" value="已分配" />
              <el-option label="维修中" value="维修中" />
              <el-option label="完成" value="完成" />
              <el-option label="已取消" value="已取消" />
            </el-select>
          </el-col>
          <el-col :span="5">
            <el-select v-model="filterType" placeholder="选择类型" style="width: 100%" @change="handleFilter">
              <el-option label="全部类型" value="" />
              <el-option 
                v-for="type in repairTypes" 
                :key="type.typeCode" 
                :label="type.typeName" 
                :value="type.typeName" 
              />
            </el-select>
          </el-col>
          <el-col :span="5">
            <el-select v-model="filterPriority" placeholder="选择优先级" style="width: 100%" @change="handleFilter">
              <el-option label="全部优先级" value="" />
              <el-option label="普通" value="普通" />
              <el-option label="紧急" value="紧急" />
            </el-select>
          </el-col>
          <el-col :span="5">
            <el-input
              v-model="searchKeyword"
              placeholder="搜索申请编号、地点或申请人"
              prefix-icon="Search"
              clearable
              @keyup.enter="handleFilter"
            />
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="handleFilter">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
            <el-button @click="resetFilter">重置</el-button>
          </el-col>
        </el-row>
      </div>

      <!-- 申请列表 -->
      <el-table :data="filteredApplications" style="width: 100%" v-loading="loading">
        <el-table-column prop="applicationNo" label="申请编号" width="150" />
        <el-table-column prop="applicantName" label="申请人" width="100" />
        <el-table-column prop="repairType" label="报修类型" width="120" />
        <el-table-column prop="location" label="报修地点" width="150" />
        <el-table-column prop="description" label="问题描述" show-overflow-tooltip />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.status)">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="priority" label="优先级" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.priority === '紧急' ? 'danger' : 'info'" size="small">
              {{ scope.row.priority }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="assigneeName" label="维修人员" width="120" />
        <el-table-column prop="createTime" label="申请时间" width="180">
          <template #default="scope">{{ formatDate(scope.row.createTime) }}</template>
        </el-table-column>
        <el-table-column label="操作" width="400" fixed="right">
          <template #default="scope">
            <!-- 查看：所有可见 -->
            <el-button size="small" @click="viewDetail(scope.row)">查看</el-button>
            <!-- 分配（仅ADMIN，待审批） -->
            <el-button 
              v-if="userRole === 'ADMIN' && scope.row.status === '待审批'" 
              size="small" 
              type="primary" 
              @click="assignRepairman(scope.row)"
            >分配</el-button>
            <!-- 重新分配（ADMIN可操作全部，STAFF只能操作自己，已分配/维修中） -->
            <el-button 
              v-if="(['已分配','维修中'].includes(scope.row.status)) && ((userRole === 'ADMIN') || (userRole === 'STAFF' && String(scope.row.assigneeId) === String(userId)))" 
              size="small" 
              type="primary" 
              @click="assignRepairman(scope.row)"
            >重新分配</el-button>
            <!-- 开始维修（STAFF，已分配，自己） -->
            <el-button 
              v-if="userRole === 'STAFF' && scope.row.status === '已分配' && String(scope.row.assigneeId) === String(userId)" 
              size="small" 
              type="warning" 
              @click="startRepair(scope.row)"
            >开始维修</el-button>
            <!-- 完成维修（STAFF，维修中，自己） -->
            <el-button 
              v-if="userRole === 'STAFF' && scope.row.status === '维修中' && String(scope.row.assigneeId) === String(userId)" 
              size="small" 
              type="success" 
              @click="completeRepair(scope.row)"
            >完成维修</el-button>
            <!-- 取消（ADMIN可操作全部，STAFF只能操作自己，已分配/维修中/待审批） -->
            <el-button 
              v-if="(['待审批','已分配','维修中'].includes(scope.row.status)) && ((userRole === 'ADMIN') || (userRole === 'STAFF' && String(scope.row.assigneeId) === String(userId)))" 
              size="small" 
              type="danger" 
              @click="cancelApplication(scope.row)"
            >取消</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分配维修人员对话框 -->
    <el-dialog
      v-model="showAssignDialog"
      title="分配维修人员"
      width="500px"
    >
      <el-form :model="assignForm" :rules="assignRules" ref="assignFormRef" label-width="100px">
        <el-form-item label="维修人员" prop="assigneeId">
          <el-select v-model="assignForm.assigneeId" placeholder="请选择维修人员" style="width: 100%" popper-class="staff-select-dropdown">
            <el-option 
              v-for="staff in staffList" 
              :key="staff.id" 
              :label="staff.name" 
              :value="staff.id" 
            />
          </el-select>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showAssignDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmAssign" :loading="assigning">
            确认分配
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 完成维修对话框 -->
    <el-dialog
      v-model="showCompleteDialog"
      title="完成维修"
      width="500px"
    >
      <el-form :model="completeForm" :rules="completeRules" ref="completeFormRef" label-width="100px">
        <el-form-item label="实际用时" prop="actualDuration">
          <el-input v-model="completeForm.actualDuration" placeholder="请输入实际维修用时，如：2小时" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input 
            v-model="completeForm.remark" 
            type="textarea" 
            :rows="3"
            placeholder="请输入维修备注信息"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showCompleteDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmComplete" :loading="completing">
            确认完成
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 查看详情对话框 -->
    <el-dialog
      v-model="showDetailDialog"
      title="维修申请详情"
      width="800px"
    >
      <div v-if="currentApplication" class="detail-content">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="申请编号">{{ currentApplication.applicationNo }}</el-descriptions-item>
          <el-descriptions-item label="申请人">{{ currentApplication.applicantName }}</el-descriptions-item>
          <el-descriptions-item label="报修类型">{{ currentApplication.repairType }}</el-descriptions-item>
          <el-descriptions-item label="报修地点">{{ currentApplication.location }}</el-descriptions-item>
          <el-descriptions-item label="优先级">
            <el-tag :type="currentApplication.priority === '紧急' ? 'danger' : 'info'">
              {{ currentApplication.priority }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="getStatusTagType(currentApplication.status)">
              {{ currentApplication.status }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="申请时间">{{ formatDate(currentApplication.createTime) }}</el-descriptions-item>
          <el-descriptions-item label="维修人员">{{ currentApplication.assigneeName || '未分配' }}</el-descriptions-item>
          <el-descriptions-item label="分配时间" v-if="currentApplication.assignTime">
            {{ formatDate(currentApplication.assignTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="开始时间" v-if="currentApplication.startTime">
            {{ formatDate(currentApplication.startTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="完成时间" v-if="currentApplication.completeTime">
            {{ formatDate(currentApplication.completeTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="实际用时" v-if="currentApplication.actualDuration">
            {{ currentApplication.actualDuration }}
          </el-descriptions-item>
          <el-descriptions-item label="问题描述" :span="2">{{ currentApplication.description }}</el-descriptions-item>
        </el-descriptions>

        <!-- 照片展示 -->
        <div v-if="currentApplication.photoUrls" class="photo-section">
          <h4>问题照片</h4>
          <div class="photo-grid">
            <div 
              v-for="(photo, index) in currentApplication.photoUrls.split(',')" 
              :key="index"
              class="photo-item"
            >
              <el-image 
                :src="photo" 
                fit="cover"
                :preview-src-list="currentApplication.photoUrls.split(',')"
                :initial-index="index"
              />
            </div>
          </div>
        </div>

        <!-- 状态变更记录 -->
        <div class="status-log-section">
          <h4>状态变更记录</h4>
          <el-timeline>
            <el-timeline-item
              v-for="log in statusLogs"
              :key="log.id"
              :timestamp="formatDate(log.operationTime)"
              :type="getTimelineItemType(log.toStatus)"
            >
              <div class="log-content">
                <div class="log-status">{{ log.toStatus }}</div>
                <div class="log-operator">操作人：{{ log.operatorName }}</div>
                <div class="log-remark" v-if="log.remark">{{ log.remark }}</div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Refresh, Download } from '@element-plus/icons-vue'
import axios from 'axios'
import { exportRepairs } from '@/api/repair'

export default {
  name: 'RepairManage',
  components: {
    Search,
    Refresh,
    Download
  },
  setup() {
    const loading = ref(false)
    const assigning = ref(false)
    const completing = ref(false)
    const showAssignDialog = ref(false)
    const showCompleteDialog = ref(false)
    const showDetailDialog = ref(false)
    const applications = ref([])
    const repairTypes = ref([])
    const staffList = ref([])
    const statusLogs = ref([])
    const currentApplication = ref(null)
   
    // 筛选条件
    const filterStatus = ref('')
    const filterType = ref('')
    const filterPriority = ref('')
    const searchKeyword = ref('')
    
    // 分配表单
    const assignForm = ref({
      assigneeId: null
    })
    
    const assignRules = {
      assigneeId: [{ required: true, message: '请选择维修人员', trigger: 'change' }]
    }
    
    // 完成表单
    const completeForm = ref({
      actualDuration: '',
      remark: ''
    })
    
    const completeRules = {
      actualDuration: [{ required: true, message: '请输入实际用时', trigger: 'blur' }]
    }
    
    const assignFormRef = ref()
    const completeFormRef = ref()

    // 统计数据
    const statistics = ref([
      { label: '总申请数', value: 0, icon: 'Document', type: 'primary' },
      { label: '待审批', value: 0, icon: 'Clock', type: 'warning' },
      { label: '维修中', value: 0, icon: 'Tools', type: 'info' },
      { label: '已完成', value: 0, icon: 'Check', type: 'success' },
      { label: '已取消', value: 0, icon: 'Close', type: 'danger' },
      { label: '紧急申请', value: 0, icon: 'Warning', type: 'danger' }
    ])

    // 过滤后的申请列表
    const filteredApplications = computed(() => {
      let filtered = applications.value
      
      if (filterStatus.value) {
        filtered = filtered.filter(app => app.status === filterStatus.value)
      }
      
      if (filterType.value) {
        filtered = filtered.filter(app => app.repairType === filterType.value)
      }
      
      if (filterPriority.value) {
        filtered = filtered.filter(app => app.priority === filterPriority.value)
      }
      
      if (searchKeyword.value) {
        const keyword = searchKeyword.value.toLowerCase()
        filtered = filtered.filter(app => 
          app.applicationNo.toLowerCase().includes(keyword) ||
          app.location.toLowerCase().includes(keyword) ||
          app.applicantName.toLowerCase().includes(keyword)
        )
      }
      
      return filtered
    })

    // 获取维修类型列表
    // eslint-disable-next-line no-unused-vars
    const fetchRepairTypes = async () => {
      try {
        const res = await axios.get('/api/repair/types')
        repairTypes.value = res.data
      } catch (error) {
        console.error('获取维修类型失败', error)
        ElMessage.error('获取维修类型失败')
      }
    }

    // 获取申请列表
    const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
    const userId = userInfo.id
    const userRole = userInfo.role
    console.log('userRole:', userRole, 'userId:', userId)

    const fetchApplications = async () => {
      loading.value = true
      try {
        let res
        if (userRole === 'ADMIN') {
          res = await axios.get('/api/repair/all')
        } else if (userRole === 'STAFF') {
          res = await axios.get(`/api/repair/assignee/${userId}`)
        } else {
          applications.value = []
          loading.value = false
          return
        }
        applications.value = res.data || []
      } catch (e) {
        applications.value = []
      } finally {
        loading.value = false
      }
    }

    // 获取统计信息
    const fetchStatistics = async () => {
      try {
        const res = await axios.get('/api/repair/statistics')
        const stats = res.data
        
        statistics.value[0].value = stats.total || 0
        statistics.value[1].value = stats.pending || 0
        statistics.value[2].value = stats.repairing || 0
        statistics.value[3].value = stats.completed || 0
        statistics.value[4].value = stats.cancelled || 0
        statistics.value[5].value = stats.urgent || 0
      } catch (error) {
        console.error('获取统计信息失败', error)
      }
    }

    // 获取维修人员列表
    // eslint-disable-next-line no-unused-vars
    const fetchStaffList = async () => {
      try {
        const res = await axios.get('/api/users/by-role', { params: { role: 'STAFF' } })
        staffList.value = (res.data || []).map(user => ({ id: user.id, name: user.realName || user.username }))
      } catch (error) {
        console.error('获取维修人员列表失败', error)
      }
    }

    // 获取状态变更记录
    const fetchStatusLogs = async (applicationId) => {
      try {
        const res = await axios.get(`/api/repair/${applicationId}/logs`)
        statusLogs.value = res.data
      } catch (error) {
        console.error('获取状态变更记录失败', error)
      }
    }

    // 分配维修人员
    const assignRepairman = (application) => {
      currentApplication.value = application
      assignForm.value.assigneeId = null
      showAssignDialog.value = true
    }

    const confirmAssign = async () => {
      try {
        await assignFormRef.value.validate()
        
        assigning.value = true
        
        const selectedStaff = staffList.value.find(staff => staff.id === assignForm.value.assigneeId)
        
        const res = await axios.post(`/api/repair/${currentApplication.value.id}/assign`, null, {
          params: {
            assigneeId: assignForm.value.assigneeId,
            assigneeName: selectedStaff.name
          }
        })
        
        if (res.data) {
          ElMessage.success('维修人员分配成功')
          showAssignDialog.value = false
          await fetchApplications()
          await fetchStatistics()
        } else {
          ElMessage.error('维修人员分配失败')
        }
      } catch (error) {
        console.error('分配维修人员失败', error)
        ElMessage.error('分配维修人员失败')
      } finally {
        assigning.value = false
      }
    }

    // 开始维修
    const startRepair = async (application) => {
      try {
        await ElMessageBox.confirm(`确认开始维修申请 ${application.applicationNo}？`, '开始维修', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        // 统一参数来源
        const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
        const userId = userInfo.id
        const username = userInfo.username
        if (!userId) {
          ElMessage.error('请先登录')
          window.location.href = '/login'
          return
        }
        const res = await axios.post(`/api/repair/${application.id}/start`, null, {
          params: {
            operatorId: userId,
            operatorName: username
          }
        })
        if (res.data) {
          ElMessage.success('维修已开始')
          await fetchApplications()
          await fetchStatistics()
        } else {
          ElMessage.error('开始维修失败')
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error('开始维修失败', error)
          ElMessage.error('开始维修失败')
        }
      }
    }

    // 完成维修
    const completeRepair = (application) => {
      currentApplication.value = application
      completeForm.value = {
        actualDuration: '',
        remark: ''
      }
      showCompleteDialog.value = true
    }

    const confirmComplete = async () => {
      try {
        await completeFormRef.value.validate()
        
        completing.value = true
        
        // 统一参数来源
        const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
        const userId = userInfo.id
        const username = userInfo.username
        if (!userId) {
          ElMessage.error('请先登录')
          window.location.href = '/login'
          return
        }
        const res = await axios.post(`/api/repair/${currentApplication.value.id}/complete`, null, {
          params: {
            operatorId: userId,
            operatorName: username,
            actualDuration: completeForm.value.actualDuration
          }
        })
        
        if (res.data) {
          ElMessage.success('维修已完成')
          showCompleteDialog.value = false
          await fetchApplications()
          await fetchStatistics()
        } else {
          ElMessage.error('完成维修失败')
        }
      } catch (error) {
        console.error('完成维修失败', error)
        ElMessage.error('完成维修失败')
      } finally {
        completing.value = false
      }
    }

    // 取消申请
    const cancelApplication = async (application) => {
      try {
        const { value: cancelReason } = await ElMessageBox.prompt('请输入取消原因', '取消申请', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValidator: (value) => value ? true : '请输入取消原因'
        })
        const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
        const userId = userInfo.id
        const username = userInfo.username
        if (!userId) {
          ElMessage.error('请先登录')
          window.location.href = '/login'
          return
        }
        const res = await axios.post(`/api/repair/${application.id}/cancel`, null, {
          params: {
            operatorId: userId,
            operatorName: username,
            cancelReason: cancelReason
          }
        })
        if (res.data) {
          ElMessage.success('申请已取消')
          await fetchApplications()
          await fetchStatistics()
        } else {
          ElMessage.error('取消申请失败')
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error('取消申请失败', error)
          ElMessage.error('取消申请失败')
        }
      }
    }

    // 查看详情
    const viewDetail = async (application) => {
      currentApplication.value = application
      await fetchStatusLogs(application.id)
      showDetailDialog.value = true
    }

    // 筛选处理
    const handleFilter = () => {
      // 筛选逻辑已在computed中实现
    }

    const resetFilter = () => {
      filterStatus.value = ''
      filterType.value = ''
      filterPriority.value = ''
      searchKeyword.value = ''
    }

    // 刷新数据
    const refreshData = async () => {
      await Promise.all([
        fetchApplications(),
        fetchStatistics()
      ])
      ElMessage.success('数据已刷新')
    }

    // 导出数据
    const exportData = async () => {
      try {
        // 可根据实际筛选条件传参
        const params = {
          status: filterStatus.value || undefined,
          type: filterType.value || undefined,
          priority: filterPriority.value || undefined,
          keyword: searchKeyword.value || undefined
        }
        const response = await exportRepairs(params)
        const filename = `维修申请_${new Date().getTime()}.xlsx`
        const mimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        const blob = new Blob([response], { type: mimeType })
        const url = window.URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = url
        link.download = filename
        link.click()
        window.URL.revokeObjectURL(url)
        ElMessage.success('维修申请数据导出成功')
      } catch (error) {
        console.error('导出数据失败:', error)
        ElMessage.error('导出数据失败')
      }
    }

    // 工具函数
    const getStatusTagType = (status) => {
      const typeMap = {
        '待审批': 'warning',
        '已分配': 'info',
        '维修中': 'primary',
        '完成': 'success',
        '已取消': 'danger'
      }
      return typeMap[status] || 'info'
    }

    const getTimelineItemType = (status) => {
      const typeMap = {
        '待审批': 'warning',
        '已分配': 'info',
        '维修中': 'primary',
        '完成': 'success',
        '已取消': 'danger'
      }
      return typeMap[status] || 'info'
    }

    const formatDate = (dateStr) => {
      if (!dateStr) return ''
      const d = new Date(dateStr)
      return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
    }

    // 操作按钮权限判断
    const canOperate = (application) => {
      return userRole === 'ADMIN' || (userRole === 'STAFF' && application.assigneeId === userId)
    }

    onMounted(() => {
      fetchRepairTypes()
      fetchApplications()
      fetchStatistics()
      if (userRole === 'ADMIN') fetchStaffList()
    })

    return {
      loading,
      assigning,
      completing,
      showAssignDialog,
      showCompleteDialog,
      showDetailDialog,
      applications,
      repairTypes,
      staffList,
      statusLogs,
      currentApplication,
      filterStatus,
      filterType,
      filterPriority,
      searchKeyword,
      assignForm,
      assignRules,
      completeForm,
      completeRules,
      assignFormRef,
      completeFormRef,
      statistics,
      filteredApplications,
      assignRepairman,
      confirmAssign,
      startRepair,
      completeRepair,
      confirmComplete,
      cancelApplication,
      viewDetail,
      handleFilter,
      resetFilter,
      refreshData,
      exportData,
      getStatusTagType,
      getTimelineItemType,
      formatDate,
      canOperate,
      userRole,
      userId
    }
  }
}
</script>

<style scoped>
.repair-manage {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.statistics-section {
  margin-bottom: 30px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
  border-radius: 8px;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stat-card.primary {
  border-left: 4px solid #409eff;
}

.stat-card.warning {
  border-left: 4px solid #e6a23c;
}

.stat-card.info {
  border-left: 4px solid #909399;
}

.stat-card.success {
  border-left: 4px solid #67c23a;
}

.stat-card.danger {
  border-left: 4px solid #f56c6c;
}

.stat-icon {
  margin-right: 15px;
  font-size: 24px;
  color: #409eff;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.filter-section {
  margin-bottom: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.detail-content {
  max-height: 600px;
  overflow-y: auto;
}

.photo-section {
  margin-top: 20px;
}

.photo-section h4 {
  margin-bottom: 15px;
  color: #303133;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 15px;
}

.photo-item {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.photo-item .el-image {
  width: 100%;
  height: 150px;
}

.status-log-section {
  margin-top: 30px;
}

.status-log-section h4 {
  margin-bottom: 15px;
  color: #303133;
}

.log-content {
  padding: 10px;
  background: #f8f9fa;
  border-radius: 6px;
}

.log-status {
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.log-operator {
  font-size: 12px;
  color: #606266;
  margin-bottom: 3px;
}

.log-remark {
  font-size: 12px;
  color: #909399;
  font-style: italic;
}

/* 限制维修人员下拉框最大高度，超出可滚动 */
.staff-select-dropdown .el-select-dropdown__wrap {
  max-height: 240px !important;
  overflow-y: auto;
}
</style> 